{% extends "erp/base.html" %}

{% block title %}产品出库{% endblock %}

{% block scripts %}
<script src="/static/js/product_outbound.js"></script>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <h2>产品出库</h2>
        
        <form id="productOutboundForm" method="post">
            {% csrf_token %}
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>SKU</th>
                            <th>箱规</th>
                            <th>总箱数</th>
                            <th>出货箱数</th>
                            <th>出货PCS数</th>
                            <th>出货日期</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for form in forms %}
                        <tr class="form-row">
                            <td>{{ form.sku.value }}<input type="hidden" name="sku" value="{{ form.sku.value }}"></td>
                            <td>{{ form.box_spec.value }}<input type="hidden" name="box_spec" value="{{ form.box_spec.value }}"></td>
                            <td>{{ form.total_boxes.value }}<input type="hidden" name="total_boxes" value="{{ form.total_boxes.value }}"></td>
                            <td><input type="number" name="outbound_boxes" class="form-control outbound-boxes" min="0" max="{{ form.total_boxes.value }}" value="{{ form.outbound_boxes.value }}"></td>
                            <td class="outbound-pcs">0</td>
                            <td><input type="date" name="date" class="form-control" value="{{ today }}"></td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="5" class="text-center">当前没有可出库的产品</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            {% if forms %}
            <div class="text-end">
                <button type="submit" class="btn btn-primary btn-submit">确认出库</button>
            </div>
            {% endif %}
        </form>
        
        <div id="successMessage" class="alert alert-success mt-3" style="display: none;">
            出库成功！
        </div>
    </div>
</div>
{% endblock %}